<!-- Copyright (c) 2014 The Chromium Authors. All rights reserved.
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file. -->

<link rel="import" href="../common/cr-collapsible.html">
<link rel="import" href="cr-issue-list.html">

<polymer-element name="cr-issue-inbox-section" attributes="issues weeks showRecentActivity">
    <template>
        <link rel="stylesheet" href="../common/common.css">
        <style>
            .cr-collapsible-header {
                padding: 0.5em 16px;
                display: block;
            }
        </style>

        <cr-issue-list issues="{{ visibleIssues }}" showRecentActivity="{{ showRecentActivity }}" approvals></cr-issue-list>
        <template if="{{ hiddenIssues.length }}">
            <cr-collapsible active="{{ showingHiddenIssues }}">
                <a is="cr-action" class="cr-collapsible-header">
                    {{ hiddenIssues.length }} older
                    {{ "issue" | pluralize(hiddenIssues.length) }}
                </a>
                <template if="{{ showingHiddenIssues }}">
                    <cr-issue-list issues="{{ hiddenIssues }}" showRecentActivity="{{ showRecentActivity }}" approvals></cr-issue-list>
                </template>
            </cr-collapsible>
        </template>
    </template>
    <script>
        Polymer({
            computed: {
                state: "[issues, weeks]",
            },
            created: function() {
                this.weeks = "all";
                this.showRecentActivity = false;
                this.issues = null;
                this.visibleIssues = [];
                this.hiddenIssues = [];
                this.showingHiddenIssues = false;
            },
            stateChanged: function() {
                var self = this;
                this.visibleIssues = [];
                this.hiddenIssues = [];
                if (this.weeks == "all") {
                    this.visibleIssues = this.issues;
                    return;
                }
                if (!this.issues)
                    return;
                var date = this.filterDate();
                this.issues.forEach(function(issue) {
                    if (issue.lastModified >= date)
                        self.visibleIssues.push(issue);
                    else
                        self.hiddenIssues.push(issue);
                });
            },
            filterDate: function() {
                if (this.weeks == "today")
                    return Date.create().rewind({days: 1});
                return Date.create().rewind({
                    weeks: parseInt(this.weeks, 10) + 1,
                });
            },
            pluralize: function(text, value) {
                if (value > 1)
                    return text.pluralize();
                return text;
            },
        });
    </script>
</polymer-element>
